<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">作业管理中心</text>
			<text class="subtitle">高效管理你的学习任务</text>
		</view>

		<!-- 作业统计图表 -->
		<view class="chart-container glass-card">
			<view class="chart-title">今日作业提交统计</view>
			<view class="charts-box">
				<qiun-data-charts type="mount" :opts="chartOpts" :chartData="chartData"
					v-if="chartData.series[0].data.length > 0" />
				<view class="" v-else style="height: 100%;display: flex;justify-content: center; align-items: center; flex-direction: column;">
					
					<loading2></loading2>
					暂无数据
				</view>
			</view>

		</view>

		<!-- 功能卡片区域 -->
		<view class="function-cards">
			<!-- 上传作业卡片 -->
			<view class="function-card glass-card" @click="navigateToUpload">
				<view class="card-icon">
					<uni-icons type="cloud-upload" size="40" color="#4a6cf7"></uni-icons>
				</view>
				<text class="card-title">上传作业</text>
				<text class="card-desc">单次上传作业图片或文件</text>
				<view class="card-decoration"></view>
			</view>

			<!-- 批量上传卡片 -->
			<view class="function-card glass-card" @click="navigateToBatchUpload">
				<view class="card-icon">
					<uni-icons type="plus" size="40" color="#4a6cf7"></uni-icons>
					<uni-icons type="cloud-upload" size="40" color="#4a6cf7" style="margin-left: -12rpx;"></uni-icons>
				</view>
				<text class="card-title">批量上传</text>
				<text class="card-desc">一次上传多个作业文件</text>
				<view class="card-decoration"></view>
			</view>

			<!-- 作业历史卡片 -->
			<view class="function-card glass-card" @click="navigateToHistory">
				<view class="card-icon">
					<uni-icons type="calendar" size="40" color="#4a6cf7"></uni-icons>
				</view>
				<text class="card-title">作业历史</text>
				<text class="card-desc">查看已提交的作业记录</text>
				<view class="card-decoration"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy';

	export default {
		data() {
			return {
				grade: '', // 从页面参数获取的年级
				teacherId: null, // 从缓存获取的老师ID
				chartReady: false,
				homeworkData: [], // 从接口获取的作业数据
				// 图表配置
				chartOpts: {
					color: ["#4a6cf7", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						float: "center",
						padding: 5,
						lineHeight: 20,
						margin: 5
					},
					xAxis: {
						disableGrid: true,
						axisLine: false
					},
					yAxis: {
						data: [{
							min: 0,
							axisLine: false,
							splitLine: {
								show: false
							}
						}]
					},
					extra: {
						mount: {
							type: "mount",
							widthRatio: 1.5,
							barHeight: 10,
							activeOpacity: 0.8,
							activeRadius: 3
						}
					}
				},
				// 图表数据
				chartData: {
					series: [{
						data: []
					}]
				}
			}
		},
		onLoad(options) {
			this.grade = options.grade || '';
			this.getTeacherId();
			this.fetchHomeworkData();
		},
		methods: {
			fetchHomeworkData() {
				const today = this.getTodayDate();
				const url = `${globalVariable}/getHomeWorkByGrade?teacherId=${this.teacherId}&dateTime=${today}`;

				uni.showLoading({
					title: '加载数据中...'
				});

				uni.request({
					url: url,
					success: (res) => {
						uni.hideLoading();
						if (res.data.status === 1 && res.data.data) {
							this.homeworkData = res.data.data;
							this.updateChartData();
						} else {
							this.chartReady = true; // 即使没有数据也允许渲染
							uni.showToast({
								title: res.data.message || '暂无作业数据',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						this.chartReady = true; // 即使出错也允许渲染
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},
			updateChartData() {
				// 统计各年级作业数量
				const gradeCount = {};

				this.homeworkData.forEach(item => {
					if (!gradeCount[item.grade]) {
						gradeCount[item.grade] = 0;
					}
					gradeCount[item.grade]++;
				});

				// 转换为图表数据格式
				const chartData = Object.keys(gradeCount).map(grade => {
					return {
						name: grade,
						value: gradeCount[grade]
					};
				});

				// 确保DOM更新完成后再设置数据
				this.$nextTick(() => {
					this.chartData = {
						series: [{
							data: chartData
						}]
					};
					this.chartReady = true; // 标记图表可以渲染
				});
			},
			// 从本地缓存获取老师ID
			getTeacherId() {
				this.teacherId = uni.getStorageSync('teacherId') || 4; // 默认为4
			},

			// 获取今天日期(YYYY-MM-DD格式)
			getTodayDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},





			navigateToUpload() {
				uni.navigateTo({
					url: '/pages/homeWorkUpOne/homeWorkUpOne?grade=' + this.grade
				});
			},
			navigateToBatchUpload() {
				uni.navigateTo({
					url: '/pages/homeWorkUp/homeWorkUp?grade=' + this.grade
				});
			},
			navigateToHistory() {
				uni.navigateTo({
					url: '/pages/homeWorkHistroy/homeWorkHistroy?grade=' + this.grade
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 基础容器 */
	.container {
		padding: 30rpx;
		min-height: 100vh;
		background: #f5f7fa;
		background-image: radial-gradient(circle at 10% 20%, rgba(255, 79, 10, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(19, 255, 105, 0.2) 0%, transparent 20%);
		display: flex;
		flex-direction: column;
	}

	/* 顶部标题 */
	.header {
		margin-bottom: 30rpx;
		text-align: center;

		.title {
			font-size: 44rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 毛玻璃卡片基础样式 */
	.glass-card {
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.4);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
		}
	}

	/* 图表容器 */
	.chart-container {
		margin-bottom: 30rpx;
		padding: 20rpx;

		.chart-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			text-align: center;
		}

		.charts-box {
			width: 100%;
			height: 400rpx;
		}
	}

	/* 功能卡片区域 */
	.function-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
	}

	/* 单个功能卡片 */
	.function-card {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		height: 280rpx;

		.card-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: rgba(74, 108, 247, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
		}

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.card-desc {
			font-size: 26rpx;
			color: #666;
		}

		.card-decoration {
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: rgba(74, 108, 247, 0.05);
			top: -40rpx;
			right: -40rpx;
			z-index: -1;
		}

		&:nth-child(2n) .card-decoration {
			background: rgba(76, 175, 80, 0.05);
			left: -40rpx;
			right: auto;
		}

		&:nth-child(3n) .card-decoration {
			background: rgba(233, 30, 99, 0.05);
			bottom: -40rpx;
			top: auto;
		}
	}

	/* 响应式调整 */
	@media (max-width: 500px) {
		.function-cards {
			grid-template-columns: 1fr;
		}
	}
</style>